<%--
  Created by IntelliJ IDEA.
  User: 匹诺曹
  Date: 2023/12/18
  Time: 19:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<style>
    .one {
        width: 100px;
        height: 200px;
        margin-left: 20px;
    }

    .modal-body {
        display: inline-block;
        margin-left: 100px;
    }

    .you {
        float: left;
    }

    .glyphicon {
        font-size: 40px;
    }

    .right {
        position: absolute;
        top: -120px;
        cursor: pointer;
    }

    .left {
        position: absolute;
        top: -20px;
        cursor: pointer;
    }

    .rightDiv {
        margin-left: 100px;
    }
    .form-group{
        width: 400px;
        margin-left: 100px;
    }
</style>
<body>
<div class="skin-default" id="wrapper">
    <%@ include file="/static/pages/head/header.jsp" %>
    <%--中间内容--%>
    <div class="page-wrapper">
        <section class="page-body">
            <div class="row widget">
                <section class="col-md-12">
                    <div class="box table">
                        <div class="box-header">
                            <h3 class="box-title">角色信息展示</h3>
                            <br/>
                            <a class="btn btn-success" title="add" style="margin-top: 20px;" data-toggle="modal" data-target=".update">添加角色</a>
                        </div>
                        <div class="box-body">
                            <table id="table" class="table table-responsive table-hover">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>角色名</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${roleList}" var="role">
                                    <tr>
                                        <td>${role.roleId}</td>
                                        <td>${role.roleName}</td>
                                        <td>
                                            <a class="btn btn-info" data-toggle="modal" data-target=".update"
                                               onclick="update(${role.roleId})"
                                               >修改</a>
                                            <a class="btn btn-primary" data-toggle="modal" data-target=".power"
                                               onclick="power(${role.roleId})">赋权</a>
                                            <a class="btn btn-danger"
                                               href="${pageContext.request.contextPath}/role/delRoleId/${role.roleId}">删除</a>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </div>
    <%--权限--%>
    <div class="modal fade power" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">赋权</h4>
                </div>
                <form action="#">
                    <div class="modal-body">
                        <label class="you">已有权限</label>
                        <select size="8" name="selectList" class="one" title="leftPower">

                        </select>
                    </div>
                    <div class="modal-body">
                        <div class="right">
                            <i class="glyphicon glyphicon-arrow-right" title="min"></i>
                        </div>
                        <div class="left">
                            <i class="glyphicon glyphicon-arrow-left" title="add"></i>
                        </div>
                    </div>
                    <div class="modal-body rightDiv">
                        <label class="you">未有权限</label>
                        <select size="8" name="selectList" class="one" title="rightPower">

                        </select>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <%--修改--%>
    <div class="modal fade update" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改/添加</h4>
                </div>
                <form method="post" action="${pageContext.request.contextPath}/role/updateRoleId">
                    <div class="modal-body">
                        <div class="form-group" >
                            <label>RoleId</label>
                            <input type="text" class="form-control" placeholder="RoleId" name="roleId" readonly >
                        </div>
                        <div class="form-group">
                            <label>RoleName</label>
                            <input type="text" class="form-control" placeholder="RoleName" name="roleName" >
                        </div>
                        <div class="form-group">
                            <label>RoleDesc</label>
                            <input type="text" class="form-control" placeholder="RoleDesc" name="roleDesc" >
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

    })

    var role = null;

    function power(roleId) {
        role = roleId;
        /*移除脏数据*/
        $("[title='leftPower']").children().remove();
        $("[title='rightPower']").children().remove();

        /*已有权限*/
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/menu/findRid/" + roleId,
            dataType: "json",
            success: function (menu) {
                // console.log(menu);
                $(menu).each(function (i, v) {
                    $text = $("<option value='" + v.menuId + "'>" + v.menuName + "</option>");
                    $("[title='leftPower']").append($text);
                })
            }
        })

        /*未有权限*/
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/menu/findNoRid/" + roleId,
            dataType: "json",
            success: function (menu) {
                // console.log(menu);
                $(menu).each(function (i, v) {
                    $text = $("<option value='" + v.menuId + "'>" + v.menuName + "</option>");
                    $("[title='rightPower']").append($text);
                })
            }
        })
    }

    var leftId = null;
    $("[title='leftPower']").change(function () {
        leftId = $(this).val();
    })

    var rightId = null;
    $("[title='rightPower']").change(function () {
        rightId = $(this).val()
    })

    /*移除权限*/
    $("[title='min']").click(function () {
        console.log(leftId + "\t" + role);
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/menu/min/" + leftId + "/" + role,
            dataType: "json",
            success: function (res) {
                if (res == 1) {
                    location.reload();
                } else {
                    alert("error");
                }
            }
        })
    })

    /*添加权限*/
    $("[title='add']").click(function () {
        console.log(rightId + "\t" + role);
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/menu/add/" + rightId + "/" + role,
            dataType: "json",
            success: function (res) {
                if (res == 1) {
                    location.reload();
                } else {
                    alert("error");
                }
            }
        })
    })


    /*回显数据*/
    function update(roleId){
        $.ajax({
            type:"GET",
            url:"${pageContext.request.contextPath}/role/findById/"+roleId,
            dataType:"json",
            success:function (role){
                $("[name='roleId']").val(role.roleId);
                $("[name='roleName']").val(role.roleName);
                $("[name='roleDesc']").val(role.roleDesc);
            }
        })
    }

    /*删除回显数据*/
    $("[title='add']").click(function (){
        $("[name='roleId']").val("");
        $("[name='roleName']").val("");
        $("[name='roleDesc']").val("");
    })


</script>
</body>

</html>

